<html>
<head>
	<title>页面词条整理</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="./css/aui.css" rel="stylesheet" type="text/css"/>
    <link href="./css/index.css" rel="stylesheet" type="text/css"/>
    <link href="./css/aui-iconfont.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="./js/api.js"></script>
	<script type="text/javascript" src="./js/socket.io-2.1.1.js"></script>
	<script type="text/javascript" src="./js/socket.js"></script>
	<script type="text/javascript" src="./js/template.js"></script>
</head>
<style type="text/css"> 
	#connect_status{
		z-index: 999;
		top:2px;
		right:0;
		position: fixed;  
		padding: 5px;
		border-radius: 5px 0 0 5px;
		color:#ffffff;
		background: #1E9FFF;
		cursor: pointer;
	}
	#connect_status i{
		margin-right: 3px;
	}
	.connect_status_error{
		background: #FF3355!important;
	}
</style>
<body>
 <div id="connect_status"></div>
<!-- <button onclick="getData()">加载数据</button>
<button onclick="addData()">添加数据</button>
<button onclick="deleteData()">删除数据</button>
 -->
<style type="text/css">
.add-box{
	position: relative;
	width: 100%;
	height: auto;
	background: #0062CC; 
	color: #FFFFFF;
}
.add-box button{
	margin-top: 3px;
	margin-left: 3px;
	border: #FFFFFF 1px solid;
	background: transparent;
}
.delete-btn{
	color: red;
	cursor: pointer;
}
#editBox{
	color: #000000;
	position: absolute;
	right: 100px;
	top: 5px;
	bottom: 5px;
	width: 300px;
	height: auto;
	background: #FFFFFF;
	padding: 0;
	margin: 0;
}
#zdx{
	position: absolute;
	top: 5px;
	right: 430px;
	color: #FFFFFF;
	cursor: pointer;
}
</style>
<div class="add-box">
	<button onclick="exportData()">导出</button>
	<div>当前pageId:<span id="pageId"></span></div>
	<div>内容:<span id="pageText"></span></div>
	<div id="zdx" onclick="toUpper();">是否转大写：否</div>
	<textarea id="editBox" onpaste="getText();" placeholder="请将剪切板的内容黏贴到这里"></textarea>
</div>
<div id="result"></div>
<div id="table"></div>
</body>
<script id="table_row" type="text/html"> 
<table style="width: 100%;">
	<tbody>
	<tr>
		<td>Page ID</td>
		<td>English</td>
		<td>Arabic</td>
		<td width="60px;">操作</td>
	</tr>
	{{ for(var i in it) { }}
		<tr>
			<td>{{=it[i].pageId}} </td>
			<td>{{=it[i].text}} </td>
			<td>{{=it[i].translate}} </td>
			<td class="delete-btn" onclick="deleteData('{{=it[i].id}}');">删除</td>
		</tr>
	{{ } }}
	</tbody>
</table>
</script>
<script type="text/javascript">
	var isUpper = $api.getStorage('isUpper');
	var currentPageId = $api.getStorage('currentPageId');
	function getText(){
		setTimeout(function(){
			var content = $api.val($api.byId('editBox')); 
			if(content){
				 if(isUpper=='true'){
					 content = content.toUpperCase();
				 }
				 addData(content);
			}
		},300);
	}
	function checkUpper(){ 
		if(currentPageId){
			$api.html($api.byId('pageId'),currentPageId);
		}
		if(isUpper=='true'){ 
			$api.html($api.byId('zdx'),'是否转大写：是');
		}else{ 
			$api.html($api.byId('zdx'),'是否转大写：否');
		}
	}
	checkUpper();
	function toUpper(){
		if(isUpper=='true'){
			isUpper = 'false';
			$api.html($api.byId('zdx'),'是否转大写：否');
		}else{
			isUpper = 'true';
			$api.html($api.byId('zdx'),'是否转大写：是');
		}
		$api.setStorage('isUpper',isUpper);
	}
    var debug = true;//是否开启调试
	$socket.init(function(status,msg){
		console.log(status,msg);
		var connect_status = $api.byId("connect_status");
		if(status){
			if($api.hasCls(connect_status,'connect_status_error')){
				$api.removeCls(connect_status,'connect_status_error');
			}
			$api.html(connect_status,'<i class="aui-iconfont aui-icon-check"></i>'+msg);
			getData();
		}else{
			if(!$api.hasCls(connect_status,'connect_status_error')){
				$api.addCls(connect_status,'connect_status_error');
			}
			$api.html(connect_status,'<i class="aui-iconfont aui-icon-close"></i>'+msg);
		} 
	});
	$socket.message(function(data){
		console.log("接收消息:");
		console.log(data);
	}); 
	function exportData(){
		var param = {};
		param.type='export';
		$socket.get('PageWordWork',param,function(status,data){
			if(status){
				var path = data.body.data;
				path = path.substring(path.indexOf("web"));
				var url = "http://youdelu.fun:10005/"+path;
				location.href = url;
				console.log(data);
			}else{ 
				console.log(data);
			}
		});
	}
	function getData(){
		var param = {};
		param.type='list';
		$socket.get('PageWordWork',param,function(status,data){
			if(status){
				var table = data.body.data;
				 var html = $api.template("table_row",table);
				  $api.html($api.byId("table"),html);
				console.log(data);
			}else{ 
				console.log(data);
			}
		});
	}
	function addData(text){
		var param = {};
		param.type='add';
		var isPageId = false ;
		if(text.indexOf("EGP")>0){
			var t = text.substring(text.indexOf("EGP")+3); 
			if(t.length>0){
				var d = t.charAt(0);
				var s = d.charCodeAt(0); 
				if(d&&s!=32){
					try{
						d = parseInt(d);
					}catch(e){} 
					if(typeof(d)=='number'){
						isPageId = true;
					}
				}
			}
		}
		if(isPageId){
			param.pageName=text;
		}else{
			var pageId = $api.html($api.byId('pageId'));
			if(!pageId){
				$api.html($api.byId('result'),"请先粘贴一个pageId到顶部的输入框");
				$api.val($api.byId('editBox'),''); 
				return;
			}
			param.pageName= pageId;
			param.value=text;
		}
		$socket.get('PageWordWork',param,function(status,data){
			if(status){
				//这是添加内容
				if(data.param.value){
					$api.html($api.byId('pageText'),data.body.wordBean.text);
				}else{
					//这是添加值
					$api.html($api.byId('pageId'),data.body.wordPage.name);
					$api.setStorage('currentPageId',data.body.wordPage.name);
				} 
				setTimeout(() => getData(), 0);   
				$api.val($api.byId('editBox'),''); 
				console.log(data);
			}else{ 
				console.log(data);
			}
		});
	}
	function deleteData(id){
		var param = {};
		param.type='delete';
		param.isPage='false';
		param.id=id;
		$socket.get('PageWordWork',param,function(status,data){
			if(status){ 
				setTimeout(() => getData(), 0);   
				console.log(data);
			}else{ 
				console.log(data);
			}
		});
	}
</script>
</html>